<template>
  <div class="search-com">
    <el-form :inline="true" :model="formData" ref="formRef" class="search-form">
      <div class="w-full">
        <el-form-item
          v-for="item in props.searchList"
          :key="item.key"
          :label="item.type === 'input' ? '' : item.label"
          class="inline-flex"
        >
          <!-- 输入框 -->
          <el-input
            v-if="item.type === 'input'"
            v-model="formData[item.key]"
            :placeholder="`${$t('searchCom.请输入')}${item.label}`"
            clearable
            style="width: 360px"
          >
            <template #prefix>
              <span class="color-555555">{{ item.label }}</span>
            </template>
          </el-input>

          <!-- 下拉选择框 -->
          <el-select
            v-else-if="item.type === 'select'"
            v-model="formData[item.key]"
            :placeholder="`${$t('searchCom.请选择')}${item.label}`"
            clearable
            style="width: 360px"
          >
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>

          <!-- 日期选择器 -->
          <el-date-picker
            v-else-if="item.type === 'date'"
            v-model="formData[item.key]"
            :type="item.dateType || 'date'"
            :placeholder="getDatePlaceholder(item)"
            clearable
            style="width: 360px"
          />

          <!-- 日期范围选择器 -->
          <el-date-picker
            v-else-if="item.type === 'daterange'"
            v-model="formData[item.key]"
            :type="item.dateType || 'daterange'"
            :start-placeholder="$t('searchCom.开始日期')"
            :end-placeholder="$t('searchCom.结束日期')"
            :default-time="
              item.defaultTime || [
                new Date(2000, 0, 1, 0, 0, 0),
                new Date(2000, 0, 1, 23, 59, 59),
              ]
            "
            clearable
          />

          <!-- 联级选择器 -->
            <el-cascader
              v-else-if="item.type === 'cascader'"
              v-model="formData[item.key]"
              :props="item.props"
              :options="item.options"
              @change="handleChange"
              :placeholder="$t('searchCom.请选择')"
            />
        </el-form-item>

        <el-form-item class="inline-flex float-right">
          <el-button @click="handleReset">{{$t('searchCom.重置')}}</el-button>
          <el-button type="primary" @click="handleSearch">{{$t('searchCom.查询')}}</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// 定义props，接收搜索条件列表
const props = defineProps({
  searchList: {
    type: Array,
    default: () => [],
  },
});

// 定义事件
const emit = defineEmits(["search", "reset"]);

// 表单引用
const formRef = ref(null);

// 表单数据
const formData = reactive({});

// 初始化表单数据
onMounted(() => {
  initFormData();
});

// 初始化表单数据
const initFormData = () => {
  props.searchList.forEach((item) => {
    formData[item.key] = "";
  });
};

// 根据日期类型获取占位符
const getDatePlaceholder = (item) => {
  const typePlaceholder = {
    date: t('searchCom.请选择日期'),
    datetime: t('searchCom.请选择日期时间'),
    year: t('searchCom.请选择年份'),
    month: t('searchCom.请选择月份'),
    week: t('searchCom.请选择周'),
    datetimerange: t('searchCom.请选择日期时间范围'),
    monthrange: t('searchCom.请选择月份范围'),
    yearrange: t('searchCom.请选择年份范围'),
  };
  return typePlaceholder[item.dateType] || t('searchCom.请选择');
};

// 查询方法
const handleSearch = () => {
  emit("search", { ...formData });
};

// 重置方法
const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  initFormData();
  emit("reset");
};
</script>

<style scoped lang="scss">
.search-com {
  margin-bottom: 20px;

  .search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .el-form-item {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>
